<template>
    <div class="goodsinfo-container">
        <van-nav-bar title="商品详情" @click-left="$router.back()" left-arrow fixed />
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in goodsLunbo" :key="item.src">
                <img :src="item.src">
            </van-swipe-item>
        </van-swipe>
        <div>
            <div class="color:#888">
                <span>¥{{ goodsInfo.sell_price }}</span>
                <span style="text-decoration: line-through;color:red">¥{{ goodsInfo.market_price }}</span>
            </div>
            <div>
                {{ goodsInfo.title }}
            </div>
            <div>
                <span>上架时间：</span>
                <span>{{ dateFormat(goodsInfo.add_time, 'YYYY-MM-DD') }}</span>
            </div>
            <div>
                介绍：{{ goodsInfo.zhaiyao }}
            </div>
            <div>
                商品编号：{{ goodsInfo.goods_no }}
            </div>
            <div>
                商品库存：{{ goodsInfo.stock_quantity }}
            </div>
            <p class="content" v-html="goodsInfo.content"></p>
        </div>
    </div>

</template>
<script setup>
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import { fetchGoodsImg, fetchGoodsInfo } from '../api/goods'
import { dateFormat } from '../util'
const route = useRoute()
const goods_id = route.query.id

const goodsLunbo = ref([])
const goodsInfo = ref({})

onMounted(() => {
    _fetchGoodsImg()
    _fetchGoodsInfo()
})

const _fetchGoodsImg = async () => {
    let { message } = await fetchGoodsImg(goods_id)
    goodsLunbo.value = message
}

const _fetchGoodsInfo = async () => {
    let data = await fetchGoodsInfo(goods_id)
    goodsInfo.value = data.message
}

</script>
<style lang="scss" scoped>
.goodsinfo-container {
    padding-top: 48px;

    .my-swipe .van-swipe-item {
        color: #fff;
        height: 300px;
        text-align: center;

        img {
            // width: 100%;
            height: 100%;
        }
    }

    // 深度选择器
    .content :deep(img) {
        width: 100%;
    }
}
</style>